<template>
  <div>
    <flexbox class="bottom-edit-apply vux-1px-t" :gutter="0">
      <flexboxItem :span="6">
        <a @click="cancelConfirm">取消申请</a>
      </flexboxItem>
      <flexboxItem :span="6">
        <a class="vux-1px-l" @click="setQueryParams">修改申请</a>
      </flexboxItem>
    </flexbox>
    <!-- 取消申請提示彈窗 -->
    <div v-transfer-dom>
      <confirm v-model="cancelTurndownShow"
      class="turndown-confirm turndown-alert" title="提示"
      @on-confirm="cancelThisApply"
      cancel-text="取消" confirm-text="确认" :show-cancel-button="true">
        <p>确定取消该申请？</p>
      </confirm>
    </div>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem, Confirm, TransferDom } from 'vux';
  import qs from 'qs';
  export default {
    name: 'BottomEditApplyBefore',
    components: {
      Flexbox,
      FlexboxItem,
      Confirm
    },
    directives: {
      TransferDom
    },
    data () {
      return {
        queryParams: {
          KeyId: '',
          Content: {
            StartDate: '',
            EndDate: '',
            Minute: 0,
            Day: ''
          }
        },
        cancelTurndownShow: false
      };
    },
    mounted () {
      this.queryParams.KeyId = this.$parent.applyInfoDatail.KeyId;
    },
    methods: {
      cancelThisApply: function (isReApply) {
        let postData = {
          data: {
            KeyId: this.queryParams.KeyId
          }
        };
        // let Type = this.$parent.applyInfoDatail.Type
        let url = '/Process/CancelAskForLeave'
        this.$parent.loadingShow = true;
        this.axios.post(url, qs.stringify(postData))
        .then((res) => {
          if (res.data.IsSuccess === true) {
            this.$parent.loadingShow = false;
            this.responseTurndownText = '取消成功！';
            this.responseTurndownShow = true;
            this.$parent.getItemDetail();
          } else {
            this.responseTurndownText = '网络连接发生错误，请稍后再试';
            this.responseTurndownShow = true;
          }
        })
        .catch(() => {
          this.responseTurndownText = '网络连接发生错误，请稍后再试';
          this.responseTurndownShow = true;
        });
      },
      cancelConfirm: function () {
        this.cancelTurndownShow = true;
      },
      setQueryParams: function () {
        for (let props in this.queryParams.Content) {
          this.queryParams.Content[props] = this.$parent.applyInfoDatail.Content[props];
        }
        let Type = this.$parent.applyInfoDatail.Type
        let name = Type === 1?'WriteAskLeave':Type === 2?"WriteContract"
          :Type === 3?'WriteSecret':Type === 4?"WriteKey"
          :Type === 5?"WriteHolLeave":"WriteFDH"
        this.goToEditDatetime(name);
      },
      goToEditDatetime: function (name) {
        this.$router.push({
          name,
          query: {
            applyInfo: JSON.stringify(this.$parent.applyInfoDatail),
            titleName: '修改申请'
          }
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  @import '../../assets/style/variable';
  .bottom-edit-apply{
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2;
    &:before{
      top: -.5px;
      border-color: #ccc;
    }
    a{
      display: block;
      position: relative;
      font-size: getRem(32);
      line-height: getRem(98);
      background: #fff;
      text-align: center;
      &.active{
        color: #fff;
        background-image: linear-gradient(194deg,#fa5864 0%,#fc476d 100%),
        linear-gradient(#ffffff,#ffffff);
        background-blend-mode: normal,
        normal;
      }
    }
    .vux-1px-l{
      &:before{
        border-color: #ccc;
      }
      &.router-link-active:before{
        border-color: transparent;
      }
    }
    .router-link-active{
      color: #fff;
      background-image: linear-gradient(97deg,
        #fa5864 0%,
        #fc476d 100%),
      linear-gradient(
          #ffffff,
          #ffffff);
      background-blend-mode: normal,
      normal;
    }
  }
</style>
